$('.magnifier-box').click(function (){
    var svg = d3.select(".svg-img-box")
        .append("svg")
        .attr("width", 400)
        .attr("height", 300);
    var image = new Image();
    image.src = "./img/bg-big.jpg";
    image.onload = function() {
        // 将图片绘制到 SVG 上
        svg.append("image")
            .attr("xlink:href", image.src)
            .attr("x", 150)
            .attr("y", 50)
            .attr("width", 200)
            .attr("height", 150);

        // 将 SVG 转换为图片
        var svgString = new XMLSerializer().serializeToString(svg.node());
        var svgData = "data:image/svg+xml," + encodeURIComponent(svgString);
        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");
        var img = new Image();
        img.src = svgData;
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            context.drawImage(img, 0, 0);

            // 创建新的图片
            var newImage = new Image();
            // newImage.src = canvas.toDataURL("image/png");
            $('.popup-svg-img .svg-img-box img').src = canvas.toDataURL("image/png");
        };
    };
    $('.popup-svg-img').show()
})
